<template>
    <div class="NeighbourhoodsDetail">

        <div class="houseList">
            <div style="position: relative;">
                <CommonImage class="imgCustom" :src="baseList.pictureAddress" />
                <span v-if="baseList.picNum > 1" class="picNum">+{{ baseList.picNum }}</span>
            </div>
            <div class="item">
                <div style="display: flex;justify-content: space-between;">
                    <div>
                        <div class="flex">
                            <span class="title">{{ baseList.name }}</span>
                        </div>
                        <div class="flex">
                            <span class="tag text7">No.{{baseList.no}}</span>
                            <div style="display: flex;">
                                <img class="ad1" src="../../assets/images/address.svg">
                                <span class="text8" style="padding: 0;">{{ baseList.address == null ?
                                    $t('text.Neighbourhoods.l61') : baseList.address
                                }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="flex" style="position: relative;">
                        <DialogLayout33>
                            <div style="display: flex;align-items: center;flex-direction: column;">
                                <div class="dd1"><img src="../../assets/images/wDetele.svg" class="dd2"></div>
                                <div class="dd3">{{ $t('text.Neighbourhoods.l62') }}</div>
                            </div>
                        </DialogLayout33>
                    </div>

                </div>

                <div class="flex2">
                    <div class="f1">
                        <div class="text5">{{ baseList.avPrice }} AED/m²</div>
                        <div class="text8">
                            {{ $t('text.Neighbourhoods.l63') }}
                        </div>
                    </div>
                    <div class="f1">
                        <div class="text6">{{ baseList.sellNum==null?'-':baseList.sellNum+$t('text.Neighbourhoods.l67') }}</div>
                        <div class="text8">
                            {{ $t('text.Neighbourhoods.l64') }}
                        </div>
                    </div>
                    <div class="f1">
                        <div class="text6">{{ baseList.rentNum==null?'-':baseList.rentNum+$t('text.Neighbourhoods.l67') }}</div>
                        <div class="text8">
                            {{ $t('text.Neighbourhoods.l65') }}
                        </div>
                    </div>
                    <div class="f1">
                        <div class="text6">{{ baseList.dealNum==null?'-':baseList.dealNum+$t('text.Neighbourhoods.l67') }}</div>
                        <div class="text8">
                            {{ $t('text.Neighbourhoods.l66') }}
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div>
            <HouseDeatilNavigation @returnData="setPage" :navList="topNavList"></HouseDeatilNavigation>
        </div>
        <BasicDetail v-if="page == '1'&&isLoad" :dataList="baseList"></BasicDetail>
        <PictureVideoDetail v-if="page == '2'"></PictureVideoDetail>
        <UnitManage v-if="page == '3'"></UnitManage>
        <HousingResources v-if="page == '4'" :areaId="baseList.areaIds"></HousingResources>
        <ControlAnalysis v-if="page == '5'"></ControlAnalysis>
        <OperateLog v-if="page == '6'"></OperateLog>
    </div>
</template>
    
<script>
import BasicDetail from './BasicDetail'
import UnitManage from './UnitManage'
import PictureVideoDetail from './PictureVideoDetail'
import HousingResources from './HousingResources'
import ControlAnalysis from './ControlAnalysis'
import OperateLog from './OperateLog'
import { communityFindDetails } from '../../http/api'
import CommonImage from '@/components/input/CommonImage.vue'
import DialogLayout33 from '@/components/dialogLayout/DialogLayout33.vue'
import HouseDeatilNavigation from '@/components/navigation/HouseDeatilNavigation.vue'
export default {
    name: 'NeighbourhoodsDetail',
    components: {
    BasicDetail: BasicDetail,
    UnitManage: UnitManage,
    PictureVideoDetail: PictureVideoDetail,
    HousingResources: HousingResources,
    ControlAnalysis: ControlAnalysis,
    OperateLog: OperateLog,
    CommonImage,
    DialogLayout33,
    HouseDeatilNavigation
},
    props: {
    },
    data() {
        return {
            topNavList: [this.$t('text.Neighbourhoods.l1'), this.$t('text.Neighbourhoods.l2'), this.$t('text.Neighbourhoods.l3'),
            this.$t('text.Neighbourhoods.l4'), this.$t('text.Neighbourhoods.l5'), this.$t('text.Neighbourhoods.l6')],
            page: 1,
            isLoad:false,
            baseList: {}
        }
    },
    mounted() {
        if (this.$route.query.id != undefined) {
            communityFindDetails({ id: this.$route.query.id }).then(res => {
                if (res !== undefined) {
                    this.baseList = res
                    this.isLoad=true
                    console.log(this.baseList)
                }
            }).catch()
        }

    },
    methods: {
        setPage(index) {
            this.page = index
        }
    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
.f1{
    display: flex;
    flex-direction: column;
    align-items: baseline;
}
.NeighbourhoodsDetail {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.houseList {
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 10px;
}

.item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 80px;
    margin-left: 15px;
    padding-top: 20px;
}

.imgCustom {
    width: 135px;
    height: 90px;
    padding: 0;
    margin-top: 45px;
}
.picNum {
    color: white;
    background: #535352;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 10px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    padding-bottom: 1px;
    transform: scale(0.9);
}
.flex {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    word-break: keep-all;
    padding-top: 5px;
    gap: 10px;
}

.flex2 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    word-break: keep-all;
    gap: 20px;
}

.titleTag {
    border: 1px solid;
    padding: 3px 6px;
    border-radius: 2px;
    font-size: 13px;
    margin-right: 5px;
    margin-left: 20px;
}

.title {
    color: black;
    font-size: 15px;
}

.tag {
    border: 1px solid;
    padding: 3px 6px;
    border-radius: 2px;
    font-size: 12px;
    margin-right: 5px;
}

.text5 {
    font-size: 12px;
    color: rgb(236, 128, 141);
    word-break: keep-all;
    white-space: nowrap;
    text-align: initial;
    font-weight: bold;
}

.text6 {
    font-size: 12px;
    color: black;
    word-break: keep-all;
    white-space: nowrap;
    text-align: initial;
    font-weight: bold;
    padding-right: 5px;
}

.text7 {
    font-size: 12px;
    color: #6698ff;
    word-break: keep-all;
    white-space: nowrap;
    text-align: center;
    padding-right: 15px;
}

.text8 {
    font-size: 12px;
    padding-top: 5px;
    color: #5c5c5c;
    word-break: keep-all;
    white-space: nowrap;
    text-align: center;
    padding-right: 15px;
}

.ad1 {
    width: 15px;
    height: 15px;
}

.dd1 {
    background: #6698ff;
    border-radius: 100%;
    width: 35px;
    height: 35px;
    /* margin: auto 0; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.dd2 {
    width: 22px;
    height: 22px;
}

.dd3 {
    color: #6698ff;
    font-size: 13px;
    padding-top: 5px;
}
</style>